<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card ant-pro-card-split"
    >
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-col ant-pro-card-split-vertical"
          style="width: 30%; flex-shrink: 0;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-header"
            >
              <div
                class="ant-pro-card-title"
              >
                Left Details
              </div>
            </div>
            <div
              class="ant-pro-card-body"
            >
              Left Content
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-header ant-pro-card-header-border"
            >
              <div
                class="ant-pro-card-title"
              >
                Left and Right Columns with Title
              </div>
            </div>
            <div
              class="ant-pro-card-body"
            >
              <div
                style="height: 360px;"
              >
                Right Content
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProCard Split 布局 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            split
          </strong>
          : 分割方式，'vertical' 表示垂直分割
        </li>
        <li>
          <strong>
            children
          </strong>
          : ProCard 子组件
        </li>
      </ul>
      <h4>
        ProCard 子组件配置：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            colSpan
          </strong>
          : 栅格列数，可以是百分比字符串如 '30%'
        </li>
        <li>
          <strong>
            headerBordered
          </strong>
          : 是否显示头部边框
        </li>
        <li>
          <strong>
            children
          </strong>
          : 卡片内容
        </li>
      </ul>
      <h4>
        ColSpan 百分比特点：
      </h4>
      <ul>
        <li>
          <strong>
            百分比控制
          </strong>
          : 使用百分比精确控制宽度比例
        </li>
        <li>
          <strong>
            响应式适配
          </strong>
          : 百分比会根据容器宽度自动调整
        </li>
        <li>
          <strong>
            灵活布局
          </strong>
          : 比固定栅格数更灵活的布局控制
        </li>
      </ul>
      <h4>
        布局效果：
      </h4>
      <ul>
        <li>
          <strong>
            左侧卡片
          </strong>
          : 占 30% 宽度，显示详细信息
        </li>
        <li>
          <strong>
            右侧卡片
          </strong>
          : 占剩余 70% 宽度，显示主要内容
        </li>
        <li>
          <strong>
            垂直分割
          </strong>
          : 两个卡片垂直排列
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            详情页面
          </strong>
          : 左侧显示详细信息，右侧显示主要内容
        </li>
        <li>
          <strong>
            编辑页面
          </strong>
          : 左侧显示表单，右侧显示预览
        </li>
        <li>
          <strong>
            列表页面
          </strong>
          : 左侧显示筛选条件，右侧显示列表
        </li>
        <li>
          <strong>
            仪表盘
          </strong>
          : 左侧显示导航，右侧显示内容
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            比例合理
          </strong>
          : 根据内容重要性合理分配宽度比例
        </li>
        <li>
          <strong>
            响应式考虑
          </strong>
          : 在小屏幕上可能需要调整布局
        </li>
        <li>
          <strong>
            视觉平衡
          </strong>
          : 确保整体布局的视觉平衡
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>